---
id: 5dc23991f86c76b9248c6eb8
title: Schritt 6
challengeType: 0
dashedName: step-6
---

# --description--

Im vorherigen Schritt hast du die `h1`-, `h2`-, Kommentar- und `p`-Elemente in das `main`-Element hinzugefügt. Dies nennt man *nesting*. Verschachtelte Elemente sollten zwei Leerzeichen weiter rechts von dem Element, in dem sie verschachtelt sind, platziert werden. Diesen Abstand nennt man Einrückung und wird verwendet, um HTML leichter lesen zu können.

Here is an example of nesting and indentation:

```html
<main>
  <h1>Most important content of the document</h1>
  <p>Some more important content...</p>
</main>
```

Das `h1`-Element, `h2`-Element und der Kommentar sind um zwei Leerzeichen mehr eingerückt als das `main`-Element im folgenden Code. Verwende die Leertaste auf deiner Tastatur, um zwei weitere Leerzeichen vor dem `p`-Element hinzuzufügen, so dass es auch richtig eingerückt wird.

# --hints--

Dein Code sollte ein `h2`-Element mit dem Text `Cat Photos` haben. Du hast es wahrscheinlich versehentlich gelöscht, es fehlen sowohl öffnende als auch schließende Tags oder der Text hat sich geändert.

```js
assert(
  document.querySelector('h2') &&
    code.match(/<\/h2\>/) &&
    document.querySelector('h2').innerText.toLowerCase() === 'cat photos'
);
```

Du solltest nicht die `ul`- oder `li`-Elemente aus dem Beispiel hinzufügen.

```js
assert(
  !document.querySelector('ul') && !document.querySelector('li')
);
```

Du solltest nicht die Einrückung in der Zeile mit deinem `h2`-Element ändern. Das dazugehörige öffnende Tag sollte 6 Leerzeichen vom Anfang der Zeile entfernt beginnen. Du kannst den Schritt neu starten, um die ursprüngliche Einrückung wiederherzustellen.

```js
assert(code.toLowerCase().match(/<\/h1\>\s*\n\s{6}<h2>/));
```

Dein Code sollte einen Kommentar haben. Du hast den Kommentar aus einem früheren Schritt entfernt.

```js
assert(code.match(/<!--.*-->/));
```

Der Text deines Kommentars sollte `TODO: Add link to cat photos` sein. Ändere nicht den Text und die Abstände des Kommentars.

```js
assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\.?\s*-->/i));
```

Du solltest nicht die Einrückung in der Zeile mit deinem Kommentar-Element ändern. Das dazugehörige öffnende Tag sollte 6 Leerzeichen vom Anfang der Zeile entfernt beginnen. Du kannst den Schritt neu starten, um die ursprüngliche Einrückung wiederherzustellen.

```js
assert(
  code
    .toLowerCase()
    .match(/<\/h2>\s*\n\s{6}<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/)
);
```

Dein Code sollte ein `p`-Element haben. Du hast das `p`-Element aus einem vorherigen Schritt entfernt.

```js
assert(document.querySelector('p'));
```

Der Text des `p`-Elements sollte `See more cat photos in our gallery.` sein Ändere nicht den Text, die Abstände oder die Satzzeichen des `p`-Elements.

```js
assert(
  document
    .querySelector('p')
    .innerText.toLowerCase()
    .match(/see\s+more\s+cat\s+photos\s+in\s+our\s+gallery\.?$/)
);
```

Das öffnende `p`-Tag sollte eine Einrückung enthalten, die mit deinen `h2`- und Kommentar-Elementen übereinstimmt. Das dazugehörige öffnende Tag sollte 6 Leerzeichen vom Anfang der Zeile entfernt beginnen.

```js
assert(code.toLowerCase().match(/-->\s*\n\s{6}<p>/));
```

# --seed--

## --seed-contents--

```html
<html>
  <body>
    --fcc-editable-region--
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
    <p>See more cat photos in our gallery.</p>
    </main>
--fcc-editable-region--
  </body>
</html>
```

